<template>
  <template v-for="(item, index) in props.schema" :key="index">
    <div class="form-item" v-if="!item.hidden">
      <div class="label">
        <!-- <span>{{ item.label || '--' }}</span> -->
        <el-popover :disabled="item.label.length <= 6" placement="top-start" :width="200" trigger="hover" :content="item.label">
          <template #reference>
            <span>{{ item.label || '--' }}</span>
          </template>
        </el-popover>
      </div>
      <!-- 文本输入框 -->
      <template v-if="item.component === 'Input'">
        <el-input
          v-model.trim="formInline[item.field]"
          v-bind="{ ...item.componentProps }"
          :placeholder="t('keys.pleaseEnter')"
          clearable
          @change="
            () => {
              changeVal(item)
            }
          "
        />
      </template>
      <!-- 数字输入框 -->
      <template v-else-if="item.component === 'InputNumber'">
        <el-input-number
          v-model="formInline[item.field]"
          v-bind="{ ...item.componentProps }"
          :placeholder="t('keys.pleaseEnter')"
          @change="
            () => {
              changeVal(item)
            }
          "
        />
      </template>
      <!-- 下拉框的组件二次封装-->
      <template v-else-if="item.component === 'Select'">
        <!-- @change="
                              (val) => {
                                formInline[item.field] = val
                              } -->
        <lov
          v-if="item.lovCode && !item.options?.length"
          v-bind="{ ...item.componentProps }"
          :value="formInline[item.field]"
          :placeholder="t('keys.pleaseSelect')"
          :lovCode="item.lovCode"
          @change="
            (val) => {
              changeSelectVal(val, '', item)
            }
          "
        >
        </lov>
        <el-select
          v-else
          v-model="formInline[item.field]"
          v-bind="{ ...item.componentProps }"
          :placeholder="t('keys.pleaseSelect')"
          clearable
          style="width: 100%;"
          @change="
            () => {
              changeVal(item)
            }
          "
        >
          <el-option
            class="opsSpan"
            v-for="v in item.options"
            :key="`Select${v.value}`"
            :label="item.optionsField && item.optionsField.labelField ? v[item.optionsField.labelField] : v.label"
            :value="item.optionsField && item.optionsField.valueField ? v[item.optionsField.valueField] : v.value"
          />
        </el-select>
      </template>
      <!-- 下拉分页 -->
      <template v-else-if="item.component === 'pageSelect'">
        <!-- @pageChange="
                              (val, assignment) => {
                                formInline[assignment] = val
                              }" -->
        <pageSelect
          :modelValue="formInline[item.field]"
          :selectObj="{ ...item.componentProps, teleported: true }"
          v-bind="{ ...item.componentProps }"
          @pageChange="
            (val, assignment) => {
              changeSelectVal(val, assignment, item)
            }
          "
        ></pageSelect>
      </template>
      <!-- 级联选择器 -->
      <template v-else-if="item.component === 'Cascader' && item.options">
        <el-cascader
          v-model="formInline[item.field]"
          v-bind="{ ...item.componentProps }"
          :options="item.options"
          @change="
            () => {
              changeVal(item)
            }
          "
        />
      </template>
      <!-- 时间选择器 -->
      <template v-else-if="item.component === 'TimePicker'">
        <div class="time-date">
          <el-time-select
            v-model="formInline[item.field]"
            v-bind="{ ...item.componentProps }"
            @change="
              () => {
                changeVal(item)
              }
            "
          />
        </div>
      </template>
      <!-- 日期选择器 -->
      <template v-else-if="item.component === 'DatePicker'">
        <div class="time-date">
          <el-date-picker
            v-model="formInline[item.field]"
            v-bind="{ ...item.componentProps }"
            class="time-date"
            @change="
              () => {
                changeVal(item)
              }
            "
          />
        </div>
      </template>
      <!-- 日期区间选择器 请使用post请求 暂时测试了列表的搜索，其他功能请自测-->
      <template v-else-if="item.component === 'DateTimeRange'">
        <div class="time-date">
          <el-date-picker
            style="width: calc(100% - 20px) !important;"
            v-model="formInline[item.field]"
            v-bind="{ ...item.componentProps }"
            class="time-date"
            type="daterange"
            :placeholder="t('keys.please_select_date_tips')"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :range-separator="t('keys.To')"
            :start-placeholder="t('keys.StartDate')"
            :end-placeholder="t('keys.EndDate')"
            @change="
              () => {
                changeDateTimeRangeVal(item, formInline[item.field])
              }
            "
          />
        </div>
      </template>
      <!-- 动态值集 -->
      <template v-else-if="item.component === 'lovView'">
        <!-- :placeholder="t('keys.pleaseClick')" -->
        <el-input
          v-model.trim="formInline[item.field]"
          v-bind="{ ...item.componentProps }"
          :placeholder="t('keys.pleaseSelect')"
          style="width: 100%"
          readonly
          @click="inputClick(item.lovViewCode, 'lovViewRef' + item.field)"
        >
          <template #suffix>
            <el-icon class="closeval" v-if="formInline[item.field]" @click="closeClickVal(item.field)">
              <CircleClose />
            </el-icon>
          </template>
        </el-input>
        <!-- :ref="'lovViewRef' + item.field" -->
        <!-- @lovChange="lovViewChange" -->
        <lovView
          ref="lovViewRef"
          :showFieldFlag="true"
          :valueFieldFlag="true"
          :lovViewCode="item.lovViewCode"
          :Preview="item.Preview"
          :checkboxFlag="item.checkboxFlag"
          @lovChange="
            (val, keyP) => {
              formInline[item.field] = val[keyP]
            }
          "
        >
        </lovView>
      </template>
    </div>
  </template>
</template>

<script setup>
import lov from '@/components/lov'
import pageSelect from '@/components/page-select'
import lovView from 'components/lov-view'
import { ref, nextTick, watch } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const formInline = ref({})
const emit = defineEmits(['updataValue'])
const props = defineProps({
  schema: {
    type: Object,
    default: () => {}
  },
  formData: {
    type: Object,
    default: () => {}
  }
})
// lov静态值集或下拉分页组件赋值
const changeSelectVal = (val, key, item) => {
  if (key) {
    formInline.value[key] = val
  } else {
    formInline.value[item.field] = val
  }
}
// 输入或选择值的变化
function changeVal(item) {
  if (item.onChange) {
    item.onChange({
      field: item.field,
      value: unref(formInline)[item.field]
    })
  }
}

function changeDateTimeRangeVal(item, value) {
  if (item.component == 'DateTimeRange' && value) {
    // emit('register', ruleForm.value, root, formInline.value, true)
  } else {
    nextTick(() => {
      // emit('register', ruleForm.value, root, formInline.value, true)
    })
  }
}
const updataValue = (val) => {
  emit('updataValue', val)
}
const resetFormData = () => {
  for (let v in formInline.value) {
    formInline.value[v] = ''
  }
}
defineExpose({
  resetFormData
})
watch(
  formInline,
  (val) => {
    updataValue(val)
  },
  { deep: true }
)
// watch(
//   props.item,
//   (val) => {
//   },
//   { deep: true }
// )
</script>

<style lang="scss" scoped>
.form-item {
  margin-right: 8px;
  display: flex;
  height: 28px;
  background: #ffffff;
  border-radius: 2px; // border: 1px solid #e5e6eb;
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
  width: calc(100% / 4 - 8px);
  min-width: 230px;
  align-items: flex-start;
  margin-bottom: 8px;
  .label {
    max-width: 108px;
    display: flex;
    align-items: center;
    height: 28px;
    span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      min-width: 72px;
      font-size: 12px;
      line-height: 26px;
      padding: 0 10px;
    }
    &::after {
      content: '';
      width: 1px;
      height: 12px;
      background: #e5e6eb;
    }
  } // :not(.label) {
  //   border: 0;
  //   box-shadow: 0 0 0;
  //   border-radius: 0;
  //   height: 26px;
  //   line-height: 26px;
  //   font-size: 12px;
  //   background: transparent;
  // }
  :deep(.el-input) *,
  :deep(.time-date) * {
    border: 0;
    box-shadow: 0 0 0;
    border-radius: 0;
    height: 26px;
    line-height: 26px;
    font-size: 12px;
    background: transparent;
  }
}
</style>
